<!--企业详情-->
<template>
  <div class="detail-container">
    <el-link icon="el-icon-arrow-left" :underline="false" @click="goBack">返回</el-link>
    <div class="name">{{ unitName }}</div>
    
		<el-form ref="baseForm" :model="baseForm" class="base-form" label-position="left"
			label-width="160px">
			<div class="form-part">
				<div class="title">
          <span class="mr">企业基本信息</span>
          <el-button v-if="baseForm.relationLabelCode === 'GXBQ006'" @click="showDialog('orderDialogVisible')">成单记录</el-button>
          <el-button @click="showDialog('orderFormDialogVisible')">成单记录新增</el-button>
          <el-button v-if="baseForm.visitRecordCount != null" @click="showDialog('visitDialogVisible')">拜访记录</el-button>
        </div>
				<div class="row-item">
					<div class="col-item">
						<el-form-item label="单位名称" prop="unitName">
							<el-input placeholder="请输入单位名称" v-model="baseForm.unitName"
								:disabled="true"></el-input>
						</el-form-item>
					</div>
					<div class="col-item">
						<el-form-item label="统一信用代码" prop="unitOrgCode">
							<el-input placeholder="请输入统一信用代码" v-model="baseForm.unitOrgCode"
								:disabled="true"></el-input>
						</el-form-item>
					</div>
				</div>
				<div class="row-item">
					<div class="col-item">
						<el-form-item label="销售员" prop="supportUnitCode">
							<el-select v-model="baseForm.supportUnitCode" placeholder="请选择" style="width: 100%"
								:disabled="true">
								<el-option v-for="(it, ind) in supportUnitDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
					</div>
					<div class="col-item">
						<el-form-item label="行业" prop="industryLabelCode">
							<el-select v-model="baseForm.industryLabelCode" placeholder="请选择" style="width: 100%" disabled>
								<el-option v-for="(it, ind) in labelHybqDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
					</div>
				</div>
				<div class="row-item">
					<div class="col-item">
						<el-form-item label="实际办公地址" prop="unitStreet">
							<div style="display: flex">
								<el-select placeholder="请选择所在街道" v-model="baseForm.unitStreet"
									style="margin-right: .13rem" disabled>
									<el-option v-for="(it, ind) in unitStreetDict" :key="ind" :label="it.label"
										:value="it.value"></el-option>
								</el-select>
								<el-input placeholder="请输入详细地址" v-model="baseForm.unitAddress" disabled></el-input>
							</div>
						</el-form-item>
					</div>
					<div class="col-item">
						<el-form-item label="楼宇" prop="building">
							<el-select v-model="baseForm.building" placeholder="请选择" style="width: 100%" disabled>
								<el-option v-for="(it, ind) in buildingListDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
					</div>
				</div>
				<div class="row-item">
					<div class="col-item">
						<el-form-item label="联系人" prop="linkmanName">
							<el-input v-model="baseForm.linkmanName" placeholder="请输入" disabled></el-input>
						</el-form-item>
					</div>
					<div class="col-item">
						<el-form-item label="联系人电话" prop="linkmanPhone">
							<el-input v-model="baseForm.linkmanPhone" placeholder="请输入" disabled></el-input>
						</el-form-item>
					</div>
				</div>
				<div class="row-item">
					<div class="col-item">
						<el-form-item label="标签" prop="relationLabelCode">
              <div class="flex">
                <el-select v-model="baseForm.relationLabelCode" placeholder="请选择" style="width: 90%" disabled>
                  <el-option v-for="(it, ind) in relationLabelDict" :key="ind" :label="it.label"
                    :value="it.value"></el-option>
                </el-select>
                <el-tooltip placement="right" effect="light">
									<div slot="content">
										如需设定成单标签，请添加成单记录
									</div>
									<svg-icon style="cursor: pointer;" class-name="dangerous-icon" icon-class="dangerous" />
								</el-tooltip>
              </div>
						</el-form-item>
					</div>
					<div class="col-item">
						<el-form-item label="企业类型" prop="companyOrgType">
							<el-select v-model="baseForm.companyOrgType" placeholder="请选择" style="width: 100%" disabled>
								<el-option v-for="(it, ind) in companyOrgTypeDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
					</div>
				</div>
				<div class="row-item">
					<div class="col-item">
						<el-form-item label="人数" prop="staffNumRange">
							<el-input v-model="baseForm.staffNumRange" placeholder="请输入" disabled></el-input>
						</el-form-item>
					</div>
				</div>
			</div>
		</el-form>
    <div class="table-list">
      <div class="table-item">
        <div class="title-part">
          <div class="title">域名信息</div>
          <div class="page">
            <el-pagination
              layout="prev,slot, next"
              :total="domainTotal"
              @current-change="domainCurrentChange"
            >
              <!-- <el-button type="text" class="prev" disabled>上一页</el-button> -->
              <span class="current">{{ domainPageNum }}</span>
              <span class="total">
                /{{
                domainTotal % domainPageSize == 0
                ? domainTotal / domainPageSize
                : Math.ceil(domainTotal / domainPageSize)
                }}
              </span>
              <!-- <el-button type="text" class="next">下一页</el-button> -->
            </el-pagination>
          </div>
        </div>
        <div class="table">
          <el-table :data="domainList">
            <el-table-column align="center" prop="domainName" label="域名" min-width="200">
              <template slot-scope="{ row }">
                <span class="underline">{{ row.domainName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="icpRegCode" label="ICP备案号" min-width="160"></el-table-column>
            <el-table-column align="center" prop="policeRegCode" label="公安备案号" min-width="160"></el-table-column>
            <!-- <el-table-column align="center" prop="websiteName" label="网站名称" min-width="160"></el-table-column>
            <el-table-column align="center" prop="securityScore" label="安全评分" min-width="160"></el-table-column>-->
          </el-table>
        </div>
      </div>
      <div class="table-item">
        <div class="title-part">
          <div class="title">评测系统</div>
          <div class="page">
            <el-pagination
              layout="prev,slot, next"
              :total="systemTotal"
              @current-change="systemCurrentChange"
            >
              <!-- <el-button type="text" class="prev" disabled>上一页</el-button> -->
              <span class="current">{{ systemPageNum }}</span>
              <span class="total">
                /{{
                systemTotal % systemPageSize == 0
                ? systemTotal / systemPageSize
                : Math.ceil(systemTotal / systemPageSize)
                }}
              </span>
              <!-- <el-button type="text" class="next">下一页</el-button> -->
            </el-pagination>
          </div>
        </div>
        <div class="table">
          <el-table :data="systemList">
            <el-table-column align="center" prop="xhRegCode" label="徐汇备案号" min-width="200"></el-table-column>
            <el-table-column align="center" prop="systemName" label="系统名称" min-width="160"></el-table-column>
            <el-table-column align="center" prop="systemLevel" label="保护等级" min-width="160"></el-table-column>
            <el-table-column align="center" prop="securityScore" label="安全评分" min-width="160"></el-table-column>
            <el-table-column align="center" prop="hasTest" label="评测情况" min-width="160">
              <template slot-scope="{ row }">
                <span>{{ row.hasTest ? "是" : "否"}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="evalOrg" label="评估机构" min-width="160"></el-table-column>
            <el-table-column label="操作" width="50">
              <template slot-scope="{ row }">
                <el-button
                  class="table-btn"
                  type="text"
                  size="small"
                  v-if="row.hasTest == 1"
                  @click="showDetailDialog(row)"
                >详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <div class="table-item">
        <div class="title-part">
          <div class="title">未评测系统</div>
          <div class="page">
            <el-pagination
              layout="prev,slot, next"
              :total="unsystemTotal"
              @current-change="unsystemCurrentChange"
            >
              <span class="current">{{ unsystemPageNum }}</span>
              <span class="total">
                /{{
                unsystemTotal % unsystemPageSize == 0
                ? unsystemTotal / unsystemPageSize
                : Math.ceil(unsystemTotal / unsystemPageSize)
                }}
              </span>
            </el-pagination>
          </div>
        </div>
        <div class="table">
          <el-table :data="unsystemList">
            <el-table-column align="center" prop="xhRegCode" label="徐汇备案号" min-width="200">
              <template slot-scope="{ row }">
                <span class="underline">{{ row.xhRegCode }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="systemName" label="系统名称" min-width="160"></el-table-column>
            <el-table-column align="center" prop="systemLevel" label="保护等级" min-width="160"></el-table-column>
            <el-table-column align="center" prop="gradingType" label="定级方式" min-width="160"></el-table-column>
            <el-table-column align="center" prop="securityScore" label="安全评测" min-width="160"></el-table-column>
            <el-table-column align="center" prop="evalOrg" label="评估机构" min-width="160"></el-table-column>
          </el-table>
        </div>
      </div>-->
      <div class="table-item">
        <div class="title-part">
          <div class="title">APP</div>
          <div class="page">
            <el-pagination
              layout="prev,slot, next"
              :total="appTotal"
              @current-change="appCurrentChange"
            >
              <!-- <el-button type="text" class="prev" disabled>上一页</el-button> -->
              <span class="current">{{ appPageNum }}</span>
              <span class="total">
                /{{
                appTotal % appPageSize == 0
                ? appTotal / appPageSize
                : Math.ceil(appTotal / appPageSize)
                }}
              </span>
              <!-- <el-button type="text" class="next">下一页</el-button> -->
            </el-pagination>
          </div>
        </div>
        <div class="table">
          <el-table :data="appList">
            <el-table-column align="center" prop="appName" label="APP名称" min-width="200">
              <template slot-scope="{ row }">
                <span class="underline">{{ row.appName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="icpRegCode" label="ICP备案号" min-width="160"></el-table-column>
            <el-table-column align="center" prop="policeRegCode" label="公安部备案号" min-width="160"></el-table-column>
            <!-- <el-table-column align="center" prop="platform" label="运行平台" min-width="160"></el-table-column>
            <el-table-column align="center" prop="securityScore" label="安全评分" min-width="160"></el-table-column>-->
          </el-table>
        </div>
      </div>
      <div class="table-item">
        <div class="title-part">
          <div class="title">小程序</div>
          <div class="page">
            <el-pagination
              layout="prev,slot, next"
              :total="appletTotal"
              @current-change="appletCurrentChange"
            >
              <!-- <el-button type="text" class="prev" disabled>上一页</el-button> -->
              <span class="current">{{ appletPageNum }}</span>
              <span class="total">
                /{{
                appletTotal % appletPageSize == 0
                ? appletTotal / appletPageSize
                : Math.ceil(appletTotal / appletPageSize)
                }}
              </span>
              <!-- <el-button type="text" class="next">下一页</el-button> -->
            </el-pagination>
          </div>
        </div>
        <div class="table">
          <el-table :data="appletList">
            <el-table-column align="center" prop="appletName" label="小程序名称" min-width="200">
              <template slot-scope="{ row }">
                <span class="underline">{{ row.appletName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="icpRegCode" label="ICP备案号" min-width="160"></el-table-column>
            <el-table-column align="center" prop="policeRegCode" label="公安部备案号" min-width="160"></el-table-column>
            <!-- <el-table-column align="center" prop="appletId" label="APP  ID" min-width="160"></el-table-column>
            <el-table-column align="center" prop="securityScore" label="安全评分" min-width="160"></el-table-column>-->
          </el-table>
        </div>
      </div>
    </div>
    
    <detailDialog v-model="detailDialogVisible" :row="tableRow" />
    <orderDialog v-model="orderDialogVisible" :row="baseForm" />
    <orderFormDialog v-model="orderFormDialogVisible" :unitOrgCode="unitOrgCode" />
    <visitDialog v-model="visitDialogVisible" :row="baseForm" />
  </div>
</template>

<script>
import {
  getEditEnterpriseInfo,
  getDomainList,
  getSystemList,
  getAppList,
  getAppletList,
  manageGetDomainList,
  manageGetSystemList,
  manageGetAppList,
  manageGetAppletList
} from "@/api/enterprise";
import detailDialog from '../property/component/detailDialog.vue'
import orderDialog from './component/orderDialog.vue';
import orderFormDialog from './component/orderFormDialog.vue';
import visitDialog from './component/visitDialog.vue';
export default {
  components: {
    detailDialog,
    orderDialog,
    orderFormDialog,
    visitDialog
  },
  data() {
    return {
      baseForm: {
        unitName: "",
        unitOrgCode: "",
        supportUnitCode: "",
        industryLabelCode: "",
        unitStreet: "",
        unitAddress: "",
        building: "",
        hasLinkman: "",
        relationLabelCode: "",
        linkmanName: "",
        linkmanPhone: "",
        companyOrgType: "",
        staffNumRange: "",
        visitRecordCount: null,
      },
      domainList: [], // 域名列表
      domainTotal: 0, // 域名总数
      domainPageNum: 1, // 域名当前页
      domainPageSize: 10, // 域名每页条数

      systemList: [], // 已评测系统
      systemTotal: 0, // 已评测系统总数
      systemPageNum: 1, // 已评测系统当前页
      systemPageSize: 10, // 已评测系统每页条数

      unsystemList: [], // 未评测系统
      unsystemTotal: 0, // 未评测系统总数
      unsystemPageNum: 1, // 未评测系统当前页
      unsystemPageSize: 10, // 未评测系统每页条数

      appList: [], // APP列表
      appTotal: 0, // APP总数
      appPageNum: 1, // APP当前页
      appPageSize: 10, // APP每页条数

      appletList: [], // 小程序列表
      appletTotal: 0, // 小程序总数
      appletPageNum: 1, // 小程序当前页
      appletPageSize: 10, // 小程序每页条数
      tableRow: null,
      detailDialogVisible: false,
      orderDialogVisible: false,
      orderFormDialogVisible: false,
      visitDialogVisible: false,
    };
  },
  computed: {
    enterpriseId() {
      return this.$route.query.enterpriseId;
    },
    unitName() {
      return this.$route.query.unitName;
    },
    unitOrgCode() {
      return this.$route.query.unitOrgCode;
    },
    roles() {
      return this.$store.getters.roles;
    },
    supportUnitDict() {
      const dict = this.$store.getters.dict
      const list = []
      for (let value in dict.supportUnit) {
        list.push({
          label: dict.supportUnit[value],
          value
        })
      }
      return list
    },
    labelHybqDict() {
      const dict = this.$store.getters.dict;
      const list = [];
      for (let value in dict.labelHybq) {
        list.push({
          label: dict.labelHybq[value],
          value
        });
      }
      return list;
    },
    unitStreetDict() {
      const dict = this.$store.getters.dict;
      const list = [];
      for (let value in dict.unitStreet) {
        list.push({
          label: dict.unitStreet[value],
          value
        });
      }
      return list;
    },
    buildingListDict() {
      const dict = this.$store.getters.dict
      const list = []
      for (let value in dict.buildingList) {
        list.push({
          label: dict.buildingList[value],
          value
        })
      }
      return list
    },
    hasLinkmanDict() {
      const list = [{
          label: "有",
          value: 1
        },
        {
          label: "无",
          value: 0
        }
      ];
      return list;
    },
    relationLabelDict() {
      const dict = this.$store.getters.dict;
      const list = [];
      for (let value in dict.relationLabel) {
        list.push({
          label: dict.relationLabel[value],
          value
        })
      }
      return list;
    },
    companyOrgTypeDict() {
      const dict = this.$store.getters.dict
      const list = []
      for (let value in dict.companyOrgType) {
        list.push({
          label: dict.companyOrgType[value],
          value
        })
      }
      return list
    }
  },
  mounted() {
    if (this.unitOrgCode) {
      this.init();
    }
  },
  methods: {
    init() {
      this.getEditEnterpriseInfo()
      this.getDomainList();
      this.getSystemList();
      // this.getUnsystemList();
      this.getAppList();
      this.getAppletList();
    },
    // 获取企业基本信息
    getEditEnterpriseInfo() {
      getEditEnterpriseInfo({
        enterpriseId: this.enterpriseId
      }).then(res => {
        console.log(res);
        this.baseForm = res.data;
      });
    },
    // 获取域名列表
    getDomainList() {
      let fn = getDomainList;
      if (this.roles[0].authority === "ROLE_ADMIN") {
        fn = manageGetDomainList;
      }
      fn({
        unitOrgCode: this.unitOrgCode,
        pageNum: this.domainPageNum,
        pageSize: this.domainPageSize
      }).then(res => {
        this.domainList = res.data.list;
        this.domainTotal = res.data.total;
      });
    },
    domainCurrentChange(page) {
      this.domainPageNum = page;
      this.getDomainList();
    },
    // 获取已评测系统列表
    getSystemList() {
      let fn = getSystemList;
      if (this.roles[0].authority === "ROLE_ADMIN") {
        fn = manageGetSystemList;
      }
      fn({
        unitOrgCode: this.unitOrgCode,
        pageNum: this.systemPageNum,
        pageSize: this.systemPageSize
      }).then(res => {
        this.systemList = res.data.list;
        this.systemTotal = res.data.total;
      });
    },
    systemCurrentChange(page) {
      this.systemPageNum = page;
      this.getSystemList();
    },
    // 获取未评测系统列表
    getUnsystemList() {
      let fn = getSystemList;
      if (this.roles[0].authority === "ROLE_ADMIN") {
        fn = manageGetSystemList;
      }
      fn({
        unitOrgCode: this.unitOrgCode,
        pageNum: this.unsystemPageNum,
        pageSize: this.unsystemPageSize,
        hasTest: 0
      }).then(res => {
        this.unsystemList = res.data.list;
        this.unsystemTotal = res.data.total;
      });
    },
    unsystemCurrentChange(page) {
      this.unsystemPageNum = page;
      this.getUnsystemList();
    },
    // 获取APP列表
    getAppList() {
      let fn = getAppList;
      if (this.roles[0].authority === "ROLE_ADMIN") {
        fn = manageGetAppList;
      }
      fn({
        unitOrgCode: this.unitOrgCode,
        pageNum: this.appPageNum,
        pageSize: this.appPageSize
      }).then(res => {
        this.appList = res.data.list;
        this.appTotal = res.data.total;
      });
    },
    appCurrentChange(page) {
      this.appPageNum = page;
      this.getAppList();
    },
    // 获取小程序列表
    getAppletList() {
      let fn = getAppletList;
      if (this.roles[0].authority === "ROLE_ADMIN") {
        fn = manageGetAppletList;
      }
      fn({
        unitOrgCode: this.unitOrgCode,
        pageNum: this.appletPageNum,
        pageSize: this.appletPageSize
      }).then(res => {
        this.appletList = res.data.list;
        this.appletTotal = res.data.total;
      });
    },
    appletCurrentChange(page) {
      this.appletPageNum = page;
      this.getAppletList();
    },
    showDetailDialog(row) {
      this.tableRow = row
      this.detailDialogVisible = true
    },
    showDialog(name) {
      this[name] = true;
    },
    goBack() {
      // this.$router.go(-1);
      window.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 0.25rem;

  .name {
    font-size: 0.33rem;
    margin: 0.13rem 0 0.25rem;
  }
  .base-form {
    margin-bottom: 0.35rem;
  }
  .form-part {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0rem 0.05rem 0.8rem 0.4rem rgba(0, 0, 0, 0.05);
    border-radius: 0.05rem 0.05rem 0.05rem 0.05rem;
    border: 0.01rem solid #ffffff;
    padding: 0.19rem;

    .title {
      font-size: 0.2rem;
      color: #000822;
      margin-bottom: 0.38rem;
      display: flex;
      align-items: center;

      &::before {
        content: "";
        display: block;
        width: 0.03rem;
        height: 0.2rem;
        background: #000822;
        margin-right: 0.1rem;
      }
      .mr {
        margin-right: 20px;
      }
    }

    .row-item {
      padding-left: 0.1rem;
      display: flex;
      justify-content: space-between;

      .col-item {
        width: 45%;
        .flex {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
	}
  .table-list {
    .table-item {
      background: #ffffff;
      box-shadow: 0px .05rem .8rem .4rem rgba(0, 0, 0, 0.05);
      border-radius: .1rem;
      padding: .2rem;
      margin-bottom: .6rem;
      .title-part {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: .13rem;
        span {
          min-width: auto;
        }
        .current {
          color: #1c4088;
          font-size: .2rem;
        }
        .title {
          font-size: 0.2rem;
          color: #000822;
          &::before {
            content: "";
            display: inline-block;
            width: .03rem;
            height: .2rem;
            background: #000822;
            margin-right: 8px;
            vertical-align: text-bottom;
          }
        }
      }
      .table {
        .underline {
          cursor: pointer;
          color: #e70012;
          border-bottom: 1px solid #e70012;
        }
        .table-btn {
          color: rgba(0, 8, 34, 0.8);
          border-bottom: 2px solid #1C4088;
          padding: .05rem 0;
          &.is-disabled {
            color: #C0C4CC;
            border-bottom: 2px solid #C0C4CC;;
          }
        }
      }
    }
  }
}
</style>